<template>
  <div  class="bonus">
    <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal="false">
      <el-row>
        <el-form :model="formData" ref="formRef" :label-width="labelWidth"  :rules="rules" v-loading="formLoading" >
          <el-col :span="12">
            <el-form-item label="子奖金项名称" prop="bonusItemName">
              <el-input v-model="formData.bonusItemName" autocomplete="off" placeholder="请输入奖金项名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ECC奖金项编号" prop="eccCode">
              <el-input v-model="formData.eccCode" autocomplete="off" placeholder="请输入ECC奖金项编号" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统内奖金项编号" prop="bonusItemCode">
              <el-input v-model="formData.bonusItemCode" autocomplete="off" placeholder="请输入系统内奖金项编号" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖金项范围" prop="bonusItemScope">
              <el-select v-model="formData.bonusItemScope"   placeholder="请选择奖金项范围" style="width: 100%" clearable @change="changeBonusItemScope">
                <el-option
                  v-for="item in bonusItemsScopeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="负责机构/部门" prop="bonusItemDeptId" v-if="formData.bonusItemScope == '私有'">
              <!--下拉选全选组件-->
              <selectAll v-model="formData.bonusItemDeptId"  :options="bonusItemDeptIdOptions" :props="{label:'name',value:'deptId'}" @change="changeBonusItemDeptId"></selectAll>
<!--              <el-select v-model="formData.bonusItemDeptId"  placeholder="请选择负责机构" style="width: 100%" clearable @change="changeBonusItemDeptId">
                <el-option
                  v-for="item in bonusItemDeptIdOptions"
                  :key="item.deptId"
                  :label="item.name"
                  :value="item.deptId">
                </el-option>
              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="奖金项说明" >
              <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" v-model="formData.bonusItemDescription" placeholder="请输入奖金项说明" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary"  @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addObj, putObj, getSubItemCode} from '@/api/bonus/items' ;
import selectAll from "@/views/bonusmanage/components/selectAll";
export default {
  name: "addForm",
  components:{
    selectAll
  },
  props:{
    bonusItemDeptIdOptions:{
      type:Array,
      default:[]
    },
    bonusItemsScopeOptions:{
      type:Array,
      default:[]
    }
  },
  watch:{
  },
  data(){
    return{
      type:'add',
      formLoading:false,
      title:'新增',
      width:'50%',
      visible: false,
      labelWidth:'155px',
      formData: {bonusItemDeptId:''},
      rules: {
        bonusItemName: [{ required: true, message: '请输入奖金项名称', trigger: 'blur' },],
        date: [{ required: true, message: '请选择奖金项时间', trigger: 'change' }],
        bonusItemDeptId: [{ required: true, message: '请选择负责机构', trigger: 'change' }],
        bonusItemScope: [{ required: true, message: '请选择奖金项范围', trigger: 'change' }],
        bonusItemDescription: [{ required: true, message: '请输入奖金项说明', trigger: 'blur' }],
      }
    }
  },
  methods:{
    init(type,data,bonusItemData,deptId){
      this.type = type
      this.bonusItemData = bonusItemData ;
      this.deptId = deptId ; //列表页面搜索栏中所选中的负责机构id
      if (this.type == 'add'){
          this.$set(this.formData,'eccCode',this.bonusItemData.eccCode) ;
          console.log("this.bonusItemData:",this.bonusItemData)
          // this.$set(this.formData,'bonusItemBegin',this.bonusItemData.bonusItemBegin) ;
          // this.$set(this.formData,'bonusItemEnd',this.bonusItemData.bonusItemEnd) ;
          //this.$set(this.formData,'bonusItemDeptId',[96]) ; //多选，回显测试
          this.getSubItemCode() ;
      }

      if (type == 'edit'){
        this.formData = data ;
        this.title = '编辑'
      }
      this.visible = true ;
    },
    getSubItemCode(){
      getSubItemCode(this.bonusItemData.id).then(res=>{
         this.$set(this.formData,'bonusItemCode',res.data.data)
      }).catch(err=>{

      })
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          let formDataJson = JSON.parse(JSON.stringify(this.formData))
          formDataJson.parentId = this.bonusItemData.id
          formDataJson.deptId = this.deptId
          this.formLoading = true ;
          if (this.type == 'add'){
            addObj(formDataJson).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }else{
            putObj(formDataJson).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }

        } else {
          return false;
        }
      });
    },
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {} ;
      if (refresh){
        this.$emit('refresh')
      }
    },
    // changeBonusItemDeptId(val){
    //   if (!val){
    //     this.$set(this.formData,'bonusItemDeptName','')
    //     return
    //   }
    //   this.bonusItemDeptIdOptions.map(item=>{
    //     if (item.deptId == val){
    //       this.$set(this.formData,'bonusItemDeptName',item.name)
    //     }
    //   })
    // },
     //全选下拉组件，触发change方法
    changeBonusItemDeptId(val){
      if (val.length == 0){
        this.$set(this.formData,'bonusItemDeptId','') //清空负责部门编号
        this.$set(this.formData,'bonusItemDeptName','')//清空负责部门名称
      }else{
        this.$set(this.formData,'bonusItemDeptId',val.toString())
        // this.$set(this.formData,'bonusItemDeptName',[])
        let bonusItemDeptNameArr = []
        this.bonusItemDeptIdOptions.map(item=>{
          console.log("val.includes(item.deptId):",val.includes(item.deptId))
          if (val.includes(item.deptId)){
            bonusItemDeptNameArr.push(item.name) ;
          }
        })
        this.$set(this.formData,'bonusItemDeptName',bonusItemDeptNameArr.toString())
      }
    },
    changeBonusItemScope(){
      this.$set(this.formData,'bonusItemDeptName','')
      this.$set(this.formData,'bonusItemDeptId','')
    }
  }
}
</script>

<style scoped>
.checkboxWrapper {
  padding: 8px 20px;
  border-bottom: 1px solid #ccc;
}
</style>
